<template>
  <el-sub-menu v-if="hasChild" :index="index">
    <template #title>
      <el-icon><Component :is="menu.icon" /></el-icon>
      <span>{{ menu.name }}</span>
    </template>
    <template #default>
      <MyMenuItem v-for="item in menu.children" :menu="item" />
    </template>
  </el-sub-menu>
  <el-menu-item v-else :index="index">
    <el-icon><Component :is="menu.icon" /></el-icon>
    <span>{{ menu.name }}</span>
  </el-menu-item>
</template>

<script>
export default {
  name: "MyMenuItem",
  props: ["menu"],
  data() {
    return {};
  },
  computed: {
    //判断是否有children
    hasChild() {
      return this.menu.children && this.menu.children.length > 0;
    },
    //判断是否有跳转路径
    index() {
      return this.menu.router || this.menu.name;
    },
  },
};
</script>
